<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<base href="<%=basePath%>">
		<meta charset="utf-8" />
		<title>米家（MIJIA）小白智能摄像</title>
		<link rel="stylesheet" href="<%=basePath%>/css/GoodsDetail.css" type="text/css"/>
		<link rel="stylesheet" href="<%=basePath%>/css/prism_nav.css" />
		<link rel="stylesheet" type="text/css" href="<%=basePath%>/css/zzsc.css">
	</head>
	<body>
		<jsp:include page="header_htl.jsp"></jsp:include>
 		<div id="good_detail_body">
		<div class="content">
			<table>
				<tr>
					<td>
						<div class="left">
							<div class="con-FangDa" id="fangdajing">
  								<div class="con-fangDaIMg">
  							<!-- 正常显示的图片-->
  								<img src="${pageContext.request.contextPath}${goodDetail.goodsImg[0].imgUrl }">
    						<!-- 滑块-->  
   							 <div class="magnifyingBegin"></div>
    						<!-- 放大镜显示的图片 -->
    					<div class="magnifyingShow"><img src="${pageContext.request.contextPath}${goodDetail.goodsImg[0].imgUrl }"></div>
  								</div>
  							</div>
							<input type="hidden" value="${goodDetail.goodId}" name="goodId" id="goodId"/>
							<div class="l2">
								<c:forEach items="${goodDetail.goodsImg}" var="imglist">
									<img src="${pageContext.request.contextPath}${imglist.imgUrl }" />
								</c:forEach>
							</div>
						</div>
					</td>
					<td>
						<div class="content">
							<h3>${goodDetail.goodName }&nbsp;-&nbsp;${goodDetail. goodInfo}</h3>
							<div class="content1">
								<div><img src="img/htmlItemImg/c1.0.png"/></div>
									<ul>
										<li>价格</li>
										<li><span class="pri1">￥${goodDetail.goodPrice }</span></li>
									</ul>
								</div>
							<div class="content2">
									
										<img src="img/htmlItemImg/c1.jpg"/>好评率<span>98%</span>[评论<span>8.8万+</span>条]
									
								</div>
								<div class="content3">
									<table>
										<tr>											
											<td rowspan="3">促销</td>
											<td>此价格不与套装优惠同时享受</td>
											<td>共<span>1</span>项，<a href="">展开查看</a></td>
										</tr>
										<tr>
											<td>满9元另加19.90元，或满15元另加29.90元...<a href="">立即参加</a></td>
												<td>共<span>1</span>项，<a href="">展开查看</a></td>
										</tr>
										
									</table>
								</div>
								<hr />
								<div class="content4">
									<table class="colorlist">
										<tr>
											<td>库存：</td>
											<td>${goodDetail.stock }</td>
										</td>
									</table>
								</div>
								<hr  class="h2"/>
								<div class="content5">
									<table>
								
										<tr>
											<td rowspan="2">送货至</td>
											<td><select class="sel">
												<option>广州市黄埔区</option>
												<option>广州市越秀区</option>	
												<option>广州市天河区</option>	
												<option>广州市番禺区</option>	
												<option>广州市海珠区</option>	
											</select></td>
											<td><span class="black">有货</span>，  23:00前下单,预计<span class="black">明天(12月07日)</span>送达</td>
										</tr>
										<tr>
											<td>由 1号店 发货，并提供售后服务  支持</td>
											<td><span class="blue">86元免基础运费(20kg内)  货到付款  准时达  夜间配</span></td>
										</tr>
									</table>
								</div>
								<div class="content6">
									<button class="reduce">-</button>
									<input type="text"  value="1" class="amount" id="goodNumber" name="goodNumber"/>
									<button class="add">+</button>
									<button id="addshopcar" class="addshopcar">加入购物车</button>
									<ul>
										<li>保障</li>
										<li>支持7天无理由退货</li>
										<li>正品保障</li>
									</ul>
								</div>
						</div>
					</td>
					<td>
						<div class="right">
							<ul>
								<li>看了还看&nbsp;&nbsp;&nbsp;<a href="">换一批</a></li>
								<c:forEach items="${goodDetail.goodsImg}" var="imglist">
									<li>
										<div class="right1">
											<img class="elImg" src="${pageContext.request.contextPath}${imglist.imgUrl }"/><br />
											<span>${goodDetail.goodName}</span>
											<span class="red">¥${goodDetail.goodPrice}</span>
										</div>
									</li>
								</c:forEach>
							</ul>
						</div>
					</td>
				</tr>
			</table>
		</div>
		<div class="introduce">
			<div class="introduceleft">
				<ul>
					<li>小米自营旗舰店<span class="redborder">自营</span></li>
					<li>小米自营旗舰店欢迎您<br />
						<button class="btn1">进入店铺</button></li>
					<li>看了本商品的用户最终购买了</li>
					<c:forEach items="${goodDetail.goodsImg}" var="imglist">
					<li>
						<img class="elImg" src="${pageContext.request.contextPath}${imglist.imgUrl }"/>
						<div>${goodDetail.goodName}</div>
						<span>¥${goodDetail.goodPrice}</span><br />
					</li>
					</c:forEach>
				</ul>
				
			</div>
			<div class="introduceright">
				<div class="introduceright1">
				<ul>
					<li class="li1">商品介绍</li>
					<li>评价<span class="red">8.8万+</span></li>
					<li>规则及包装</li>
					<li>售后服务</li>
				</ul>
				</div>
				<div class="introduceright2">
					<table>
						<tr>
							<td colspan="2">规格参数</td>
							<td rowspan="3"><a href="search.goods?likeword=">查看更多 </a></td>
						</tr>
						<tr>
							<td>商品编号：${goodDetail. goodId}</td>
							<td class="t1">商品名称:${goodDetail.goodName}&nbsp;-&nbsp;${goodDetail. goodInfo}</td>
						</tr>
						<tr>
							<td>商品毛重：425.00g</td>
							<td>商品产地：中国大陆</td>
						</tr>
						
					</table>
				</div>
				<div class="foot">
				<textarea  rows="20" cols="80" style="border:none;width: 100%" id="articleContent" name="articleContent">${goodDetail.goodName }
					</textarea>
				</div>
				
			</div>
			
		</div>
		<div class="prism_wrap clearfix">
			<div class="prism_nav">
				<div class="prism_top_ad">
					<img src="img/prism_nav/5a267628N811711ba.jpg" />
				</div>
				<div class="prism_nav_center">
					<div id="prismPerson">
						<span class="prism_icon_tab">
							<img src="img/prism_nav/3.1我的.png" />
						</span>
						<u class="prism_icon_text">个人中心</u>
					</div>
					<div id="prismCart">
						<div class="prism_cart_tab">
							<span >
								<img src="img/prism_nav/3.1购物车.png" />
							</span>
						<div class="prism_cart_text"><a class="inCartConfirm"></a>购物车</div>
						</div>
					</div>
					<div id="prismCoupon">
						<span class="prism_icon_tab">
							<img src="img/prism_nav/3.1优惠券.png" />
						</span>
						<u class="prism_icon_text">回到首页</u>
					</div>
				</div>
				<div class="prism_nav_btm">
					<div id="prismBacktop">
						<span class="prism_icon_tab">
							<img src="img/prism_nav/回到顶部.png" />
						</span>
					</div>
				</div>
			</div>
		</div>
		<div class="prism_bottom">
			<div class="prism_bttom_ad">
				<span onclick="hiddenadd()">x</span>
				<img id="addimg" src="img/home_page/560a3e46N3f7851f4.jpg!cc_230x230.jpg" />
			</div>
		</div>
		</div>
		<iframe id="iframe1" name="buttom" marginwidth=0 marginheight=0 width=1400 height=350 scrolling="no" src="buttom_htl_2.html" frameborder=0></iframe>
		<iframe id="iframe2" name="buttom" marginwidth=0 marginheight=0 width=1400 height=120 scrolling="no" src="buttom_htl.html" frameborder=0></iframe>
		<!--<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>-->
		<script type="text/javascript" src="<%=basePath%>/js/GoodsDetail.js" ></script>
		<script type="text/javascript" src="<%=basePath%>/js/prism_nav.js" ></script>
		<script type="text/javascript" class="library" src="<%=basePath%>/js/jquery.colorbox-min.js"></script>
		<script type="text/javascript" class="library" src="<%=basePath%>/js/zzsc.js"></script>
		<script type="text/javascript">
		$('#addshopcar').click(function() {
			var count = $('#goodNumber').val();
			if($('#activeLogin').html() == '请登录') {
				var msg = "您未登录是否跳转登录？\n\n请确认！";  
				if (confirm(msg)==true){   
					window.location = "login.jsp"; 
				}
			} else {
			if(count>0) {
				$.ajax({
		               url:"add.cart",
		               type:"post",  //提交方式，post或get
			 		    async:true, 	//同步或者异步方式，true表示异步，异步方式不会阻塞当前网页,但是会造成处理已经完成但是请求还没完成
		                datatype:'text',
			 			data:{
			 				goodId: $("#goodId").val(),
			 				goodNumber: $("#goodNumber").val(),
			 				},  //提交的请求参数，是键值对，用：隔开
			 			success:function(redata){ //请求成功的回调函数，参数是响应的返回值
			 				if('success'==redata) {
			 					alert('加入成功');
			 				} else if('exist'){
			 					alert('商品已经存在，请重新选购')
			 				}
			 			}
	           });
			}else {
				alert('商品数量不能为零');
				}
			}
		});
		$('.inCartConfirm').click(function(){
			if($('#activeLogin').html() != '请登录') {
				window.location = "in.cart";
			} else {
				window.location = "login.jsp";
			}
		});
		$('.prism_icon_text,.prism_icon_tab').click(function(){
			if($('#activeLogin').html() != '请登录') {
				window.location = "MyOrderServlet";
			}else {
				alert("请登录");
			}
		});
		</script>
	</body>
</html>
